<template>
  <!-- title="配置" -->
  <TaskChatDialog
    :model-value="modelValue"
    :close-on-click-modal="false"
    width="90%"
    class="project-dialog"
    body-class-name="project-setting-dialog"
    @open="open"
    @close="close"
    fullscreen
    :show-close="true"
    destroy-on-close>
    <el-container>
      <el-aside width="212px">
        <SettingMenu @menuItemClick="menuItemClick"></SettingMenu>
      </el-aside>
      <el-main>
        <ProjectInfo v-if="activeIndex === '1'" :projectId="projectId" @refresh="close"></ProjectInfo>
        <ProjectQualityControl v-if="activeIndex === '2'" :projectId="projectId"></ProjectQualityControl>
        <ProjectReport v-if="activeIndex === '3'" :projectId="projectId"></ProjectReport>
        <ProjectMember v-if="activeIndex === '4'" :projectId="projectId"></ProjectMember>
        <ProjectProgress v-if="activeIndex === '5'" :projectId="projectId"></ProjectProgress>
        <ProjectRiseManage v-if="activeIndex === '7'" :projectId="projectId"></ProjectRiseManage>
        <FileList v-if="activeIndex === '8'" :projectFolderId="folderId" @updateFolderId="changeFolderId"></FileList>
        <ProjectAnalysis v-if="activeIndex === '11'"></ProjectAnalysis>
        <ProjectTaskList v-if="activeIndex === '12'" :projectId="projectId"></ProjectTaskList>
      </el-main>
    </el-container>
  </TaskChatDialog>
</template>

<script setup>
const props = defineProps({
  modelValue: Boolean,
  projectId: String,
  projectFolderId: String,
})

const emit = defineEmits(['update:modelValue', 'refresh'])

const folderId = ref('')
watch(
  () => props.projectFolderId,
  (val) => {
    folderId.value = val
  },
  {
    immediate: true,
  }
)
function changeFolderId(id) {
  folderId.value = id
}
// 对话框打开触发
function open() {}

const activeIndex = ref('1')
function menuItemClick(index) {
  activeIndex.value = index
}

// 关闭对话框
function close() {
  activeIndex.value = '1'
  emit('update:modelValue', false)
  emit('refresh')
}
</script>
<style lang="scss">
.project-setting-dialog {
  height: 100%;
  padding: 0 !important;
  .elp-container {
    height: 100%;
  }

  .elp-aside {
    box-sizing: border-box;
    background-color: #f9fafb;
    padding: 32px 20px;
    overflow: hidden;
  }

  .elp-main {
    box-sizing: border-box;
    padding: 32px 20px;
    padding-bottom: 0;
    overflow: hidden;
  }
}

.project-dialog {
  .elp-dialog__header {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0px !important;
    .elp-dialog__headerbtn {
      position: absolute;
      right: 18px;
      top: 8px;
      width: 10px;
      height: 10px;
    }
  }
}
</style>
